{extend name="layout" /}
{block name="css"}
<!-- ================== BEGIN PAGE LEVEL STYLE ================== -->
<link href="artisan_plugins/DataTables/css/data-table.css" rel="stylesheet"/>
<link href="artisan_plugins/switchery/switchery.min.css" rel="stylesheet"/>
<link href="artisan_plugins/powerange/powerange.min.css" rel="stylesheet"/>
<!-- ================== END PAGE LEVEL STYLE ================== -->
<style type="text/css">
    #data-table_paginate, #data-table_info {display: none;}
    td {font-size: 13px;}
    .email{
        margin-top: 3px;
    }
</style>
{/block}

{block name="content"}
<div id="content" class="content">
    <!-- begin breadcrumb -->
    <ol class="breadcrumb pull-right">
        <li><a href="{:url('Admin/Index/index')}">首页</a></li>
        <li><a href="javascript:;">报警响应</a></li>
        <li class="active"></li>
    </ol>
    <!-- end breadcrumb -->
    <!-- begin page-header -->
    <h1 class="page-header">报警响应
        <small></small>
    </h1>
    <!-- end page-header -->
    <div class="col-md-12">
        <div class="panel panel-inverse" data-sortable-id="index-1">
            <div class="panel-heading">
                <div class="panel-heading-btn">
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i
                            class="fa fa-expand"></i></a>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload"><i
                            class="fa fa-repeat"></i></a>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning"
                       data-click="panel-collapse"><i class="fa fa-minus"></i></a>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger"
                       data-click="panel-remove"><i class="fa fa-times"></i></a>
                </div>
                <h4 class="panel-title">所有回路报警响应情况</h4>
            </div>
            <div class="panel-body">
                    <audio id="bgmusic">
                        <source = src="/static/audio/4611.mp3" type="audio/mp3">
                    </audio>
                <!-- <div id="interactive-chart" class="height-sm"></div> -->
                <div class="table-responsive">
                <table id="alarm-log-table" class="table table-striped table-bordered nowrap" width="100%" width="100%">

                    <thead>
                    <tr>
                        <td>报警时刻</td>
                        <td>报警点</td>
                        <td>回路名称</td>
                        <td>烟雾报警</td>
                        <td>温度报警</td>
                        <td>火灾报警</td>
                        <td>近红外报警</td>
<!--                    <td>烟雾报警</td>
                        <td>近红外报警</td>
                        <td>火灾报警</td> -->
                        <td>响应</td>
                        <!-- <td>操作记录(持续时间)</td> -->
                        <td>操作</td>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>

                </table>
                </div>
                <div class="col-md-12">
                <br>
                    <form method="POST" action="{:url('admin/alarm/email')}">
                             <input class="form-control" type="text" name="monitor_id" value="" placeholder="测点id"><h5>
                             <select class="form-control" name="alarm_type">
                                 <option value="电流" class="select">电流报警</option>
                                 <option value="温度">温度报警</option>
                             </select>
                             </h5>                
                             <input class="form-control" type="text" name="address" value="" placeholder="邮箱地址">
                             <br>
                             <button type="submit" class="btn btn-danger">发送</button>
                    </form>                        
                </div>
            </div>

        </div>


    </div>
    <div class="col-md-12">
        <div class="panel panel-inverse" data-sortable-id="index-1">
            <div class="panel-heading">
                <div class="panel-heading-btn">
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i
                            class="fa fa-expand"></i></a>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload"><i
                            class="fa fa-repeat"></i></a>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning"
                       data-click="panel-collapse"><i class="fa fa-minus"></i></a>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger"
                       data-click="panel-remove"><i class="fa fa-times"></i></a>
                </div>
                <h3 class="panel-title">报警响应记录表</h3>
            </div>
            <div class="alert alert-info fade in">
                <button type="button" class="close" data-dismiss="alert">
                    <span aria-hidden="true">&times;</span>
                </button>
                展示当前系统内所有的用户信息
            </div>
            <div class="panel-body">
                <div class="table-responsive">
                    <!-- <div id="interactive-chart" class="height-sm"></div> -->
                    <table id="alarm-info-table" class="table table-striped table-bordered nowrap" width="100%">
                        <thead>
                        <tr>
                            <td>报警信息</td>
                            <td>开始时间</td>
                            <td>确认用户</td>
                            <td>结束时间(报警消除)</td>
                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

                                <div class="modal fade" id="modal-dialog">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal"
                                                        aria-hidden="true">×
                                                </button>
                                                <h4 class="modal-title">提示</h4>
                                            </div>
                                            <div class="modal-body">
                                                <div class="alert alert-danger m-b-0">
                                                    <h4><i class="fa fa-info-circle"></i> 发送成功！</h4>
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <a href="javascript:;" class="btn btn-sm btn-white"
                                                   data-dismiss="modal">关闭</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
{/block}

{block name="script"}
<!-- ================== BEGIN PAGE LEVEL JS ================== -->
<script src="artisan_plugins/DataTables/js/jquery.dataTables.js"></script>
<script src="artisan_plugins/DataTables/js/dataTables.tableTools.js"></script>
<script src="artisan_js/table-manage-tabletools.demo.min.js"></script>
<script src="artisan_plugins/switchery/switchery.min.js"></script>
<script src="artisan_plugins/powerange/powerange.min.js"></script>
<script src="artisan_js/form-slider-switcher.demo.min.js"></script>
<script src="artisan_js/apps.min.js"></script>
<!-- ================== END PAGE LEVEL JS ================== -->
<script>
    $(document).ready(function () {
        // ajax异步提交表单，发送邮件信息
            // $.ajax({
            //     type: 'post',
            //     url: "{:url('admin/alarm/email')}",
            //     data: tempdata
            //     success: function (res) {
            //         if (tempdata) {
            //             // $('#modal-dialog').modal('display');
            //             alert("发送成功！");
            //         } else {
            //             alert("发送失败！");
            //         }
            //     }
            // });
        // App.init();

        $(function () {   

 
 

        TableManageTableTools.init();    
        var tables;
        createtable(); 
        setInterval(function(){
            // $('#alarm-log-table').dataTable().fnDestroy();
            // tables.html(" ");
            createtable();
            },
            50000);

//setTimeout 程序执行后200毫秒执行push，但是仅此一次。
            // setInterval(function () {
            //     // createtable();
            //     // tables.ajax.url('/admin/alarm/alarmLog').load(); 
            //     // $(tables).html(" ");
            //     createtable();
            //     },
            //     3000);
        // function process(){
            
        //     createtable();
        // }


        function createtable() {
            // tables.html(" ");

            tables = $('#alarm-log-table').dataTable({
            // 定时刷新
            "destroy":true,
            'bLengthChange': false,
            'ajax': {
                'url': '/admin/alarm/alarmLog',
            },
            'pageLength': 10,
            'columns': [
                {"data": "shart_time"},
                {"data": "monitor_id"},
                {"data": "loop_name"},
                {"data": "current_alarm"},
                {"data": "temp_alarm"},
                {"data": "fire"},
                {"data": "near"},
                // {"data": "smoke"},
                // {"data": "fire"},
                // {"data": "near_infrared"},
                {"data": "answer"},
                // {"data": "during_time"},
                {"data": "alreadysend"}
            ],
            'columnDefs': [{
                "targets": 3,
                "render": function (data, type, full, meta) {
                    if (data == true) {
                        return "<label class='label label-danger'>是</label>"
                    } else {
                        return "<label class='label label-success'>否</label>"
                    }
                }
            },{
                "targets": 4,
                "render": function (data, type, full, meta) {
                    if (data == true) {
                        return "<td><label class='label label-danger'>是</label></td>"
                    } else {
                        return "<td><label class='label label-success'>否</label></td>"
                    }
                }
            },{
                "targets": 5,
                "render": function (data, type, full, meta) {
                    if (data == true) {
                        return "<td><label class='label label-danger'>是</label></td>"
                    } else {
                        return "<td><label class='label label-success'>否</label></td>"
                    }
                }
            },{
                "targets": 6,
                "render": function (data, type, full, meta) {
                    if (data == true) {
                        return "<td><label class='label label-danger'>是</label></td>"
                    } else {
                        return "<td><label class='label label-success'>否</label></td>"
                    }
                }
            },{
                "targets": 7,
                "render": function (data, type, full, meta) {
                    switch(data){
                        case 0:
                            return "<label class='label label-danger'>发起</label>";
                        case 1:
                            return "<label class='label label-warning'>未确认</label>";
                        case 2:
                            return "<label class='label label-success'>确认</label>";
                        case 3:
                            return "<label class='label label-primary'>暂无报警</label>";
                    }
                }
            },{
                "targets": 8,
                "render": function (data, type, full, meta) {
                    if (data == true) {
                        return "<td>暂无报警</td>";
                    } else {
                        // var audio = document.getElementById("bgmusic");
                        // audio.play();
                        return "<td>邮件已发送，<a href='{:url('admin/alarm/cancel_alarm')}'><button class='btn btn-primary'>确认消除</button></a></td>";
                    }
                }
            }]
        })
        $('#alarm-info-table').dataTable({
            'destroy': true,
            'bLengthChange': false,
            'ajax': {
                'url': '/admin/alarm/alarmInfo'
            },
            'pageLength': 10,
            'columns': [
                {"data": "alarm_info"},
                {"data": "start_time"},
                {"data": "user_id"},
                {"data": "confirm_time"},
            ]
        })

        // timeouts.push(setTimeout("process()",1000))//注十秒刷新数据             
        }
    });
});

</script>
{/block}